<template>
  <div class="demo">
    <a-tabs default-active-key="1">
      <a-tab-pane
        key="1"
        tab="本地文件"
      >
        <div class="spline">
          <Spline :scene="SCENE" />
        </div>
      </a-tab-pane>
      <a-tab-pane
        key="2"
        tab="在线文件"
      >
        <a-input-search
          placeholder="请输入在线文件地址"
          size="large"
          @search="onSearch"
        >
          <a-button slot="enterButton">
            查看
          </a-button>
        </a-input-search>
        <div class="spline">
          <Spline :scene="scene" />
        </div>
      </a-tab-pane>
    </a-tabs>

  </div>
</template>

<script>
import Spline from 'spline-vue/v2'
const SCENE = process.env.NODE_ENV === 'production' ? '/vue-spline/' : '/' + 'scene.splinecode'
export default {
  name: '',
  mixins: [],
  components: { Spline },
  props: {},
  data () {
    return {
      SCENE, // 读取本地文件
      scene: 'https://prod.spline.design/LjMWGkTqSbId5res/scene.splinecode' // 读取在线文件
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onSearch(value) {
      this.scene = value
    }
  },
  destroyed() {},
  activated() {},
  deactivated() {}
}
</script>

<style lang='less' scoped>
.demo {
  height: 100vh;
  cursor: pointer;
  .spline {
    height: 90vh;
  }
}
</style>
